// 地图上的光柱
import { random } from "@/utils"
import * as THREE from "three";
import TWEEN from "@tweenjs/tween.js";
import { getDepth } from "../map"
import * as material from "../material"

// 创建标记点
export const createPointMesh = () => {
  // 标记点：几何体，材质，
  const geometry = new THREE.PlaneGeometry(1.5, 1.5)
  let mesh = new THREE.Mesh(geometry, material.lightPoint)
  mesh.renderOrder = 97
  // colorName 用于标记模型的颜色名称
  mesh.colorName = 'light'
  mesh.disabled = true
  // 缩放
  const scale = 0.15
  mesh.scale.set(scale, scale, scale)
  return mesh
}
/**
 * 创建光圈
 */
export const createLightHalo = () => {
  // lightHaloMaterial.material.color.set(colors.light)
  const mesh = new THREE.Mesh(new THREE.PlaneGeometry(1.5, 1.5), material.lightHalo.clone())
  mesh.renderOrder = 98
  mesh.colorName = 'light'
  // 缩放
  const scale = 0.3
  mesh.scale.set(scale, scale, scale)
  mesh.disabled = true
  // 动画延迟时间
  const delay = random(0, 2000)
  // 动画：透明度缩放动画
  mesh.tween1 = new TWEEN.Tween({ scale: scale, opacity: 0 })
    .to({ scale: scale * 1.5, opacity: 1 }, 1000)
    .delay(delay)
    .onUpdate((params) => {
      let { scale, opacity } = params
      mesh.scale.set(scale, scale, scale)
      mesh.material.opacity = opacity
    })
  mesh.tween2 = new TWEEN.Tween({ scale: scale * 1.5, opacity: 1 })
    .to({ scale: scale * 2, opacity: 0 }, 1000)
    .onUpdate((params) => {
      let { scale, opacity } = params
      mesh.scale.set(scale, scale, scale)
      mesh.material.opacity = opacity
    })
  mesh.tween1.chain(mesh.tween2)
  mesh.tween2.chain(mesh.tween1)
  mesh.tween1.start()
  return mesh
}

/**
 * 创建光柱
 */
export const createLightPillar = () => {
  const height = 0.4 + random(1, 5) / 5;
  // 柱体的geo,6.19=柱体图片高度/宽度的倍数
  const geometry = new THREE.PlaneGeometry(height / 6.219, height)
  // 柱体旋转90度，垂直于Y轴
  geometry.rotateX(Math.PI / 2)
  // 柱体的z轴移动高度一半对齐中心点
  geometry.translate(0, 0, height / 2)
  // 光柱01
  let light01 = new THREE.Mesh(geometry, material.lightPillar.clone())
  light01.renderOrder = 99
  light01.disabled = true
  light01.name = "createLightPillar01"
  light01.colorName = 'light'
  // 光柱02：复制光柱01
  let light02 = light01.clone()
  light02.name = "createLightPillar02"
  // 光柱02，旋转90°，跟 光柱01交叉
  light02.rotateZ(Math.PI / 2)
  // 将光柱和标点添加到组里
  return [light01, light02]
}

// 创建光柱
export const createLightPoint = (point, size,) => {
  const { depth, max } = getDepth(size)
  const lights = new THREE.Group()

  // 创建光柱
  const lightPillar = createLightPillar()
  // 创建底部标点
  const bottomMesh = createPointMesh()
  // 创建光圈
  const lightHalo = createLightHalo()
  // 将光柱和标点添加到组里
  lights.add(bottomMesh, lightHalo, ...lightPillar)
  // 设置位置
  const [x, y] = point;
  lights.position.set(x, -y, depth + 0.1);
  lights.scale.set(max / 10, max / 10, max / 10)
  lights.name = 'lightPoint'
  return lights
}

